// TingOpen에서 쓰는 MapOverlay!!

		var geocoder;
		geocoder = new google.maps.Geocoder();

		var latlng = new google.maps.LatLng(37.55575425229087, 126.93629264831543);
		var selectedLocation, lat, lng;
		
		
		Ext.define("Triends.Map2",{
			extend: "Ext.Map",
			xtype: "map2",
			id: "map2",
			config:{
				width:300,
				mapOptions: {
					center: latlng,
					zoom: 11,
					zoomControl: true,
					mapTypeId: google.maps.MapTypeId.ROADMAP,
					streetViewControl: false,
					mapTypeControl: false,
					disableDoubleClickZoom: true
				},
				listeners: {
					maprender: function(comp, map){
						var marker = new google.maps.Marker({map:map, icon: 'resource/images/mappin1.png'});
						
						google.maps.event.addListener(map, 'dblclick', function(event){ // map은 항상 map, click이 아니라 mousedown 이벤트다!
							selectedLocation = event.latLng;
							marker.setPosition(selectedLocation);
							lat = selectedLocation.lat();
							lng = selectedLocation.lng();
						});	
					}
				}
			}
		});
		
		function showAddress(){
			 var address = Ext.getCmp("map2search").getValue();
       			 geocoder.geocode( { 'address': address}, function(results, status) {
          			if (status == google.maps.GeocoderStatus.OK) {
          				var map2 = Ext.getCmp("map2")
            			map2.setMapCenter(results[0].geometry.location);
          			} else {
            			alert('Geocode was not successful for the following reason: ' + status);
          			}
        		});
      	}
		
      	
Ext.define('Triends.view.MapOverlay',{ // TingOpen에서 requires로 잡아주고 여기에서는 만들어 놓는다.
	extend: 'Ext.Panel',
	id: 'mapoverlay',
	config: {		
		layout: 'fit',
		floating: true,
		hideOnMaskTap: true,
		listeners: {
			hide: function() {
				this.destroy();
			}
		},
		modal: true,
		centered: true,
		width: 310,
		height: 400,
		items: [
				{
					xtype: 'toolbar',
					width: 300,
					docked: 'top',
					items: [{
		           		xtype: 'searchfield',
		           		id: 'map2search',
		           		width: 200,
		            	placeHolder: "Input city name",
		            	autocomplete: true,
		            	autoCreateField: true
					},
					{
		            	xtype: 'button',
		            	iconCls: 'search',
		            	iconMask: true,
		            	handler: function(){
		            		showAddress();
	            		}
	            	}]
				},
				{
		 	 		xtype: 'panel',
		 	 		docked: 'top',
		 	 		style: {'background': '-webkit-gradient(linear, left top, left bottom, from(#FEFCFC), to(#E9E8E8))'},
		 	 		items:[
		 	 			{
		 	 				xtype: 'panel',
		 	 				style: 'margin-top:-2px',
		 	 				html: "<div valign='center' align='center'><font size='1'><b>더블클릭으로 위치를 선택하세요</b></font></div>"
		 	 			}]
 	 			},
				{
					xtype: 'panel',
					docked: 'bottom',
					layout: 'hbox',
					items: [
					{
						xtype: 'button',				
						flex: 1,
						text: '선택완료',
						handler: function(){
							if(selectedLocation == null){
									navigator.notification.alert(
										'위치를 선택하세요',
										function(){},
										'알림',
										'확인'
									)
									return;
							}else{
								var mapOverlay = Ext.getCmp("mapoverlay");
								localStorage.setItem("lat", lat);
								localStorage.setItem("lng", lng);
								var tingopenlatlng = new google.maps.LatLng(lat, lng);
								geocoder.geocode({'latLng':tingopenlatlng}, function(results, status){
									if (status == google.maps.GeocoderStatus.OK) {
						            	if (results[1]) {
						            		var address = results[1].formatted_address;
									 		var tingopenlocation = Ext.getCmp('tingopenlocation');
									 		tingopenlocation.setHtml(address);
						            	}
									}
								});
								mapOverlay.destroy();
								navigator.notification.alert(
										'위치가 선택되었습니다.',
										function(){},
										'알림',
										'확인'
								)
								
							}
						}
					},
					{
						xtype: 'button',
						flex: 1,
						text: '닫기',
						handler: function(){
							var mapOverlay = Ext.getCmp("mapoverlay");
							mapOverlay.destroy();
						}
					}
					]
				}
				]
		}
});

